<template>
  <div>
    <button
      v-for="item in comList"
      :key="item.comName"
      @click="comName = item.comName"
    >
      {{ item.label }}
    </button>
    <!-- <button @click="comName = 'MySwiper'">切换swiper</button> -->
    <component :is="comName"></component>
  </div>
</template>

<script>
import MyNav from '@/components/my-nav.vue'
import MySwiper from '@/components/my-swiper.vue'
import MyLogin from '@/components/my-login.vue'
export default {
  components: {
    MyNav,
    MySwiper,
    MyLogin,
  },
  data() {
    return {
      comName: 'MyNav',
      comList: [
        {
          comName: 'MyNav',
          label: '切换MyNav',
        },
        {
          comName: 'MySwiper',
          label: '切换MySwiper',
        },
        {
          comName: 'MyLogin',
          label: '切换MyLogin',
        },
      ],
    }
  },
}
</script>

<style></style>
